class Enlarge{
    constructor(el){
        this.el=document.querySelector(el)
        this.imgObj=this.el.querySelector('.img')
        this.maskObj=this.el.querySelector('.mask')
        this.enlargeObj=this.el.querySelector('.enlarge')
        this.init()
    }
    init(){
        this.overOut()
        this.enlargeSetWH()
        this.maskMove()
    }

    enlargeSetBg(left,top){
        let enlargeW=parseFloat(this.getStyle(this.enlargeObj,'width'))
        let enlargeH=parseFloat(this.getStyle(this.enlargeObj,'height'))

        let maskW=parseInt(this.getStyle(this.maskObj,'width'))
        let maskH=parseInt(this.getStyle(this.enlargeObj,'height'))

        let x=(enlargeW/maskW)*left
        let y=(enlargeH/maskH)*top

        this.enlargeObj.style.backgroundPosition=`-${x}px -${y}px`
    }

    maskMove(){
        this.imgObj.onmousemove=(evt)=>{
            let e=evt||window.event
            let left=e.pageX-this.imgObj.parentNode.offsetLeft-this.maskObj.offsetWidth/2
            let top=e.pageY-this.imgObj.parentNode.offsetTop-this.maskObj.offsetHeight/2
            if(left<0) left=0
            if(top<0) top=0
            let maxLeft=this.imgObj.offsetWidth-this.maskObj.offsetWidth
            let maxTop=this.imgObj.offsetHeight-this.maskObj.offsetHeight
            if(left>maxLeft) left=maxLeft
            if(top>maxTop) top=maxTop
            this.maskObj.style.left=left+'px'
            this.maskObj.style.top=top+'px'
            this.enlargeSetBg(left,top)
        }
    }

    getStyle(tagObj,attrName){
        if(window.getComputedStyle){
            return window.getComputedStyle(tagObj)[attrName]
        }else{
            return tagObj.currentStyle[attrName]
        }
    }

    enlargeSetWH(){
        let maskW=parseInt(this.getStyle(this.maskObj,'width'))
        let maskH=parseInt(this.getStyle(this.maskObj,'heght'))

        let enlarge=this.getStyle(this.enlargeObj,'background-size')
        let enlargeW=parseInt(enlarge.split(' ')[0])
        let enlargeH=parseInt(enlarge.split(' ')[1])

        let imgW=this.imgObj.clientWidth
        let imgH=this.imgObj.clientwidth

        this.enlargeObj.style.width=maskW*(enlargeW/imgW)+'px'
        this.enlargeObj.style.height=maskH*(enlargeH/imgH)+'px'
    }

    overOut(){
        this.imgObj.onmouseover = () => this.maskObj.style.display = this.enlargeObj.style.display = 'block'
        this.imgObj.onmouseout = () => this.maskObj.style.display = this.enlargeObj.style.display = 'none'
    }
}